<template>
  <box-with-border>
    <div class="text-gray-400">QC声望</div>
    <div class="flex flex-wrap text-left h-full flex-grow justify-between gap-3">
      <div class="text-3xl items-center mr-3">{{ userData.userReputation }}</div>
      <div class="flex flex-col">
        <div class="whitespace-nowrap">主要标签</div>
        <el-tag>生活</el-tag>
      </div>
      <div class="w-full ">
        <div class="flex justify-between min-w-fit flex-grow">
          <div>下次升级</div>
          <div>15Rep.</div>
        </div>
        <el-progress :percentage="70" :stroke-width="16" :text-inside="true" />
      </div>

    </div>
  </box-with-border>


</template>

<script lang="ts" setup>
import BoxWithBorder from "@/components/BoxWithBorder.vue";

defineProps(["userData"]);
</script>

<style scoped>

</style>
